<template>
  <div class="setSMS">
    <header class="header">
      <el-button type="primary" @click="$router.back()">保存并返回</el-button>
    </header>
    <section class="section">
      <div class="item" v-for="(item,index) in list" :key="index">
        <div class="title">
          <div class="txt">{{item.templateDescription}}</div>
          <el-switch v-model="item.enable" @change="onChange($event, item.smsTemplateId)" active-color="#4cc575" inactive-color="#c9c9c9">
          </el-switch>
        </div>
        <div class="content">
          {{item.templateContent}}
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true,
      list: []
    };
  },
  methods: {
    async getSmsTemplateSetting() {
      const { data } = await this.$api.optionsManage.GetSmsTemplateSetting();
      this.list = data.data;
    },
    async onChange(Enable, templateId) {
      await this.$api.optionsManage.EditSmsTemplate({ Enable, templateId });
    }
  },
  created() {
    this.getSmsTemplateSetting();
  }

};
</script>

<style scoped lang="less">
.setSMS {
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
  }
  .section {
    flex: 1;
    overflow: auto;
    .item {
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f5f8fd;
        padding: 10px 20px 10px 10px;
        font-size: 14px;
        color: #727377;
      }
      .content {
        font-size: 16px;
        padding: 30px 10px;
        color: #000;
      }
    }
  }
}
</style>
